import React, { useState } from 'react'
import { Button, Form, Input, message } from 'antd';
import { useNavigate } from 'react-router-dom';
import { loginApi } from '../apis/users';
export default function Login() {
    const navigate = useNavigate();
    const [loading, setLoading] = useState(false)
    const onFinish = (values) => {
      setLoading(true)
      loginApi(values).then(res=>{
        console.log(res);
        message.success(res.message)
        setLoading(false)
        const { user, token, permissions } = res.data;
        localStorage.user = JSON.stringify(user);
        localStorage.token = token;
        localStorage.permissions = JSON.stringify(permissions);
        navigate("/nav", { replace: true })
      }).catch(err =>{
        setLoading(false)
      })
    };
    const onFinishFailed = (errorInfo) => {
    
      console.log('Failed:', errorInfo);
    };
    return (
        <div className='f-c-c h100vh' style={{ backgroundColor: 'skyblue' }}>
            <Form
                style={{ width: 400 }}
                // name="basic"
                labelCol={{
                    span: 4,
                }}
                wrapperCol={{
                    span: 16,
                }}
                //表单验证成功之后回调
                onFinish={onFinish}
                //表单验证失败之后回调
                onFinishFailed={onFinishFailed}
                autoComplete="off"
            >
              <Form.Item>
                <div className='box'>赤兔养车</div>
              </Form.Item>
                <Form.Item
                    label={<div style={{ color: "#fff" }}>账号名</div>}
                    name="username"
                    rules={[
                        {
                            required: true,
                            message: '请输入账号!',
                        },
                    ]}
                >
                    <Input placeholder='请输入账号' />
                </Form.Item>

                <Form.Item
                    label={<div style={{ color: "#fff" }}>密码</div>}

                    name="password"
                    rules={[
                        {
                            required: true,
                            message: '请输入密码!',
                        },
                    ]}
                >
                    <Input.Password placeholder='请输入密码' />
                </Form.Item>
                <Form.Item
                    wrapperCol={{
                        offset: 8,
                        span: 16,
                    }}
                >
                    <Button loading={loading} type="primary" htmlType="submit">
                        登录
                    </Button>
                </Form.Item>
            </Form>
        </div>
    )
}
